import React, { useState, useEffect } from 'react';
import { View, Text, Swiper, SwiperItem, Image, Icon } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { ArrowLeft } from '@nutui/icons-react-taro'
import { getGoodsDetail } from '../../api'
import './index.less';
import { Product } from 'src/types/Product';
import { showLoading, hideLoading } from '@tarojs/taro'
const prefix = 'goods-detail'
const Index = () => {
  const router = Taro.getCurrentInstance().router
  const params = router?.params || {}
  const [productDetail, setProductDetail] = useState<Product>({} as Product)
  const [activeItem, setActiveItem] = useState<Record<string, any>>({}); // 选中的规格
  const fetchList = async () => {
    showLoading({ title: '加载中...' })
    const { data, success } = await getGoodsDetail({ id: params.id })
    if (success) {
      setProductDetail(data)
      console.log(data)
    }
    hideLoading()
  }
  useEffect(() => {
    fetchList()
  }, [])
  return (
    <View className={`${prefix}`}>
      {/* 顶部导航栏 */}
      <View className={`${prefix}-nav`}>
        <ArrowLeft className={`${prefix}-icon`} name='arrow-left' onClick={() => { Taro.navigateTo({ url: 'pages/index/index' }) }}></ArrowLeft>
      </View>
      {/* 轮播图区域 */}
      <Swiper autoPlay indicator className={`${prefix}-swiper`} >
        {productDetail.product_banner_image?.map((item, index) => (
          <SwiperItem key={index}>
            <img
              width="100%"
              height="100%"
              onClick={() => console.log(index)}
              src={item.url}
              alt=""
            />
          </SwiperItem>
        ))}
      </Swiper>
      {/* 标题区域 */}
      <View className={`${prefix}-header`}>
        <View className={`${prefix}-title`}>
          {productDetail.product_name}
        </View>
        {/* 价格区域 */}
        <View className={`${prefix}-price`}>
          <Text className={`${prefix}-price-text`}>{productDetail.price}</Text>
          <Text className={`${prefix}-price-unit`}>元</Text>
        </View>
        {/* 热销区域 */}
        <View className={`${prefix}-hot`}>
          <Text className={`${prefix}-hot`}>热销</Text>
        </View>
      </View>
      {/* 快递包邮 */}
      <View className={`${prefix}-field`}>
        <View className={`${prefix}-post`}>
          <Text>快递包邮</Text>
          <Text>7日送达</Text>
        </View>
        <View className={`${prefix}-post`}>
          <Text>7天无理由退款</Text>
          <Text>极速退款</Text>
        </View>
        <View className={`${prefix}-post`}>
          <Text>会员优享</Text>
          <Text>下单优惠</Text>
        </View>
      </View>
      {/* 规格 */}
      <View className={`${prefix}-specifications`}>
        {productDetail.product_specification?.map((item, index) => {
          return <View key={index} className={`${prefix}-specifications-item`}>
            <View className={`${prefix}-spec`}>{item.text}：</View>
            <View className={`${prefix}-spec-list`}>
              {item.childrenList?.map((it, count) => {
                return <View onClick={() => {
                  let parentTitle = item.text;
                  let childrenId = it.id;
                  setActiveItem((pre) => {
                    return {
                      ...pre,
                      [parentTitle]: {
                        id: pre[parentTitle]?.id === childrenId ? '' : childrenId,
                        text: it.text,
                        isSelect: pre[parentTitle]?.id === childrenId ? false : true,
                        parentTitle,
                      },
                    };
                  });
                }} className={`${prefix}-spec-title ${activeItem[item.text]?.id === it.id ? 'active' : ''}`} key={count}>{it.text}</View>
              })}
            </View>
          </View>
        })}
      </View>
      {/* 商品详情图片 */}
      <View className={`${prefix}-imglist`}>
        {productDetail.product_detail_image?.map((item, index) => {
          return <Image className={`${prefix}-img`} src={item.url} key={index}></Image>
        })}
      </View>
      {/* 底部 */}
      <View className={`${prefix}-footer`}>
        <View className={`${prefix}-footer-btn`}>
          <Text>加入购物车</Text>
        </View>
        <View className={`${prefix}-footer-btn`}>
          <Text>立即购买</Text>
        </View>
      </View>
    </View>
  )
}
export default Index